<template>
  <div id="app">
    <sell-header :seller="seller"></sell-header>
    <div class="tab-wrapper">
      <tab :tabs="tabs"
           :initialIndex="0"></tab>
    </div>
  </div>
</template>

<script>
import sellHeader from 'components/header/Header'
import Goods from 'components/goods/Goods'
import Ratings from 'components/ratings/Ratings'
import Seller from 'components/seller/Seller'
import Tab from 'components/tab/Tab'
import { getSeller } from 'api'
import qs from 'query-string'

export default {
  name: 'App',
  data () {
    return {
      seller: {
        id: qs.parse(location.search).id
      }
    }
  },
  computed: {
    tabs () {
      return [
        {
          label: '商品',
          component: Goods,
          data: {
            seller: this.seller
          }
        },
        {
          label: '评价',
          component: Ratings,
          data: {
            seller: this.seller
          }
        },
        {
          label: '商家',
          component: Seller,
          data: {
            seller: this.seller
          }
        }
      ]
    }
  },
  created () {
    this._getSeller()
  },
  methods: {
    _getSeller () {
      getSeller({
        id: this.seller.id
      }).then((seller) => {
        this.seller = seller
      })
    }
  },
  components: {
    sellHeader,
    Tab
  }
}
</script>

<style lang="stylus" scoped>
.tab-wrapper
  position fixed
  top 134px
  left 0
  right 0
  bottom 0
</style>
